{% stylesheet %}
.block_coupon .block_coupon_list ul{
    display: grid;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

}
.block_coupon .block_coupon_list ul li{
    width: calc(50% - 15px);
    overflow: hidden;
    margin-bottom: 30px;
    margin-right: 15px;
}

.block_coupon .block_coupon_list ul li:nth-child(2n){
  margin-left: 15px;
  margin-right: 0;
}
.block_coupon .block_coupon_content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 150px;
    border-radius: 10px;
    box-sizing: border-box;
    position: relative;
}
.block_coupon .block_coupon_content:before,
.block_coupon .block_coupon_content:after{
    content: '';
    width: 30px;
    height: 30px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 50%;
}
.block_coupon .block_coupon_content:before{
    left: -15px;
}
.block_coupon .block_coupon_content:after{
    right: -15px;
}
.block_coupon .block_coupon_left{
    width: 180px;
    text-align: center;
    font-size: 25px;
    padding: 0 30px;
    box-sizing: border-box;
}
.block_coupon .block_coupon_left span{
    font-weight: bold;
    display: block;
    //*white-space: nowrap; *//
}
.block_coupon .block_coupon_right{
    width: calc(100% - 100px);
    padding: 0 20px;
    border-left: 1px dashed ;
    box-sizing: border-box;
}
.block_coupon .block_coupon_title{
    font-weight: bold;
    margin-bottom: 10px;
}
.block_coupon .block_coupon_time{
    display: flex;
    align-items: center;
    color: var(--coupon-color-07);
    margin-bottom: 15px;
}
.block_coupon .block_coupon_time svg{
    fill: var(--coupon-color-07);
    margin-right: 5px;
    opacity: 0.7;
}
.block_coupon .block_coupon_code{
    
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    height: 36px;
}
.block_coupon .block_coupon_code span{
    max-width: calc(100% - 80px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.block_coupon .block_coupon_code svg{
    fill: #fff;
    margin-left: 15px;
}
.block_coupon_right-fake{
background: var(--page_background_color);
border:1px solid var(--border-color);

content: '';
width: 30px;
height: 30px;
border-radius: 50%;
position: absolute;
top: 50%;
margin-top: -15px;
}
.block_coupon_right-before{
  left: -15px;
}
.block_coupon_right-after{
  right: -15px;
}
.block_coupon .block_coupon_content:before, .block_coupon .block_coupon_content:after{
  content: none;
}
@media screen and (max-width: 768px) {
    .block_coupon .block_coupon_left{
        width: 100px;
        font-size: 18px;
        padding: 0 0 0 20px;
    }
    .block_coupon .block_coupon_right{
        font-size: 12px;
    }

    
}
@media screen and (max-width: 767px) {
   .block_coupon .block_coupon_left{
        font-size: 16px;
        padding: 0 10px 0 20px;
        width: 110px;
    }
    .block_coupon .block_coupon_time,
    .block_coupon .block_coupon_title{
        font-size: 12px;
        margin-bottom: 10px;
    }
    .block_coupon .block_coupon_content{
        height: 130px;
    }
    .block_coupon .block_coupon_right{
        width: calc(100% - 80px);
        padding: 0 20px 0 10px;
    }
    .block_coupon .block_coupon_code{
        height: 30px;
        font-size: 12px;
    }
    .block_coupon .block_coupon_list ul li{
        margin: 0 0 15px 0 !important ;
        width: 100%;
    }
    .block_coupon .block_coupon_list ul li:last-child{
        margin-bottom: 0 !important;
    }
    .block_coupon .block_coupon_list ul li .block_coupon_right-fake{
        width: 26px;
        height: 26px;
    }
}
{% endstylesheet %}



{% assign  color_style_array =  section.settings.color_style | split : "," %}

{% assign replace_str =  color_style_array.last %}

<div class="block_coupon">
    <div class="container_wrapper">
        {% if section.settings.title != '' or section.settings.detail != '' %}
        <div class="block_title">
            {% if section.settings.title != '' %}<h2>{{ section.settings.title }}</h2>{% endif %}
            {% if section.settings.detail != '' %}<div class="block_detail">{{ section.settings.detail }}</div>{% endif %}
        </div>
        {% endif %}
        {% assign block_coupon_ids = section.blocks | get_array_values: "coupon.id" | join: "," %}
        {% get_coupons coupon_ids = {block_coupon_ids} limit=100 %}

        <div class="block_coupon_list">
            <ul>
                {% if section.blocks.size %}
                {% for block in section.blocks %}
                
                {% if coupons[block.coupon.id] %}
                  {% assign coupon = coupons[block.coupon.id]  %}
                  <li>
                    <div class="block_coupon_content"  style='border: 1px solid {{ section.settings.color_style | replace:replace_str, ".2)" }};background: {{ section.settings.color_style | replace:replace_str, ".04)" }};color: {{ section.settings.color_style }};--border-color:{{ section.settings.color_style | replace:replace_str, ".2)" }}'>
                        
                        <div class="block_coupon_left">
                            {% if coupon.rule.discount.type == "1" %}
                            <span>{{ coupon.rule.discount.value }}%</span> OFF

                            {% else %}
                            <span>{{ coupon.rule.discount.value | money }}</span> 
                            {% comment %} OFF {% endcomment %}
                            {% endif %}
                        </div>
                        <div class="block_coupon_right" style='border-color:{{ section.settings.color_style | replace:replace_str, ".5)" }};'>

                            <div class="block_coupon_right-fake block_coupon_right-before"></div>
                            <div class="block_coupon_right-fake block_coupon_right-after"></div>
                        
                            <div class="block_coupon_title">{{ coupon.coupon_name }}</div>
                            <div class="block_coupon_time" style='color:{{ section.settings.color_style | replace:replace_str, ".7)" }};'>
                                {% include icon_coupon_time ,{width:'16',height:'16',fill:section.settings.color_style | replace:replace_str, ".5)"} %}
                                {% if coupon.ends_at == -1 %}
                                <span>{{lang.coupon.no_expiration_date}}</span>
                                {% else %}

                                <span class="format-date" data-date="{{coupon.created_at}}" data-format="YYYY-mm-dd">{{ coupon.created_at | date: "%Y-%m-%d" }}<span> ~ <span class="format-date" data-date="{{coupon.ends_at}}" data-format="YYYY-mm-dd">{{ coupon.ends_at | date: "%Y-%m-%d" }}</span>
                                {% endif %}
                            </div>
                            <div class="block_coupon_code"  data-clipboard-text="{{ coupon.coupon_code }}" style="cursor: pointer;background-color: {{ section.settings.color_style }};">
                                <span>{{ coupon.coupon_code }}</span>
                                {% include icon_coupon_copy ,{width:'16',height:'16'} %}
                            </div>
                        </div>
                    </div>
                  </li>
                {% else %}
                <li>
                    <div class="block_coupon_content"  style='border: 1px solid {{ section.settings.color_style | replace:replace_str, ".2)" }};background: {{ section.settings.color_style | replace:replace_str, ".04)" }};color: {{ section.settings.color_style }};--border-color:{{ section.settings.color_style | replace:replace_str, ".2)" }}'>
                        
                        <div class="block_coupon_left"><span>50%</span> OFF</div>
                        <div class="block_coupon_right" style='border-color:{{ section.settings.color_style | replace:replace_str, ".5)" }};'>

                            <div class="block_coupon_right-fake block_coupon_right-before"></div>
                            <div class="block_coupon_right-fake block_coupon_right-after"></div>
                        
                            <div class="block_coupon_title">Coupon name</div>
                            <div class="block_coupon_time" style='color:{{ section.settings.color_style | replace:replace_str, ".7)" }};'>
                                {% include icon_coupon_time ,{width:'16',height:'16',fill:section.settings.color_style | replace:replace_str, ".5)"} %}
                                <span>2021/05/27 ~ 2021/06/06</span>
                            </div>
                            <div class="block_coupon_code"  data-clipboard-text="HUWEIOO596-6584" style="cursor: pointer;background-color: {{ section.settings.color_style }};">
                                <span>HUWEIOO596-6584</span>
                                {% include icon_coupon_copy ,{width:'16',height:'16'} %}
                            </div>
                        </div>
                    </div>
                </li>
                {% endif %}
                {% endfor %}

                {% else %}
                <li>
                    <div class="block_coupon_content"  style='border: 1px solid {{ section.settings.color_style | replace:replace_str, ".2)" }};background: {{ section.settings.color_style | replace:replace_str, ".04)" }};color: {{ section.settings.color_style }};--border-color:{{ section.settings.color_style | replace:replace_str, ".2)" }}'>
                        
                        <div class="block_coupon_left"><span>50%</span> OFF</div>
                        <div class="block_coupon_right" style='border-color:{{ section.settings.color_style | replace:replace_str, ".5)" }};'>

                            <div class="block_coupon_right-fake block_coupon_right-before"></div>
                            <div class="block_coupon_right-fake block_coupon_right-after"></div>
                        
                            <div class="block_coupon_title">Coupon name</div>
                            <div class="block_coupon_time" style='color:{{ section.settings.color_style | replace:replace_str, ".7)" }};'>
                                {% include icon_coupon_time ,{width:'16',height:'16',fill:section.settings.color_style | replace:replace_str, ".5)"} %}
                                <span>2021/05/27 ~ 2021/06/06</span>
                            </div>
                            <div class="block_coupon_code"  data-clipboard-text="HUWEIOO596-6584" style="cursor: pointer;background-color: {{ section.settings.color_style }};">
                                <span>HUWEIOO596-6584</span>
                                {% include icon_coupon_copy ,{width:'16',height:'16'} %}
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="block_coupon_content"  style='border: 1px solid {{ section.settings.color_style | replace:replace_str, ".2)" }};background: {{ section.settings.color_style | replace:replace_str, ".04)" }};color: {{ section.settings.color_style }};--border-color:{{ section.settings.color_style | replace:replace_str, ".2)" }}'>
                        
                        <div class="block_coupon_left"><span>50%</span> OFF</div>
                        <div class="block_coupon_right" style='border-color:{{ section.settings.color_style | replace:replace_str, ".5)" }};'>

                            <div class="block_coupon_right-fake block_coupon_right-before"></div>
                            <div class="block_coupon_right-fake block_coupon_right-after"></div>
                        
                            <div class="block_coupon_title">Coupon name</div>
                            <div class="block_coupon_time" style='color:{{ section.settings.color_style | replace:replace_str, ".7)" }};'>
                                {% include icon_coupon_time ,{width:'16',height:'16',fill:section.settings.color_style | replace:replace_str, ".5)"} %}
                                <span>2021/05/27 ~ 2021/06/06</span>
                            </div>
                            <div class="block_coupon_code"  data-clipboard-text="HUWEIOO596-6584" style="cursor: pointer;background-color: {{ section.settings.color_style }};">
                                <span>HUWEIOO596-6584</span>
                                {% include icon_coupon_copy ,{width:'16',height:'16'} %}
                            </div>
                        </div>
                    </div>
                </li>
                
                {% endif %}
            </ul>
        </div>
    </div>
</div>
<script type="text/javascript">

$(function() {
  console.log({{coupons | json}})
  var clipboard = new ClipboardJS('.block_coupon_code');
    clipboard.on('success', function(e) {
        moi.alertInfo({content:"{{lang.coupon.copy_success}}"})
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });
})
</script>


{% schema %}
{
  "tag": "section",
  "class": "block_coupon",
  "is_global": false,
  "name": {
    "zh_CN": "优惠券"
  },
  "max_blocks": "10",
  "settings": [
    {
      "type": "card_header",
      "label": {
        "zh_CN": "设置"
      }
    },
    { 
      "type": "card_input",
      "id": "title",
      "label": {
        "zh_CN": "标题"
      },
      "placeholder": {
        "zh_CN": "请输入标题"
      },
      "default": "Latest Product Coupons"
    },
    {
      "type": "card_text_editor",
      "id": "detail",
      "label": {
        "zh_CN": "简短描述"
      },
      "placeholder": {
        "zh_CN": "请输入描述"
      },
      "default": "You are welcome to visit our store,the following are the coupons that can be used to purchase product in our store,you can receive and use it."
    },
    {
      "type": "card_header",
      "label": {
        "zh_CN": "风格设置"
      }
    },
    {
      "type": "card_color",
      "label": {
        "zh_CN": "主题颜色"
      },
      "show-alpha": "false",
      "color-format": "rgb",
      "default": "rgba(0,0,0,1)",
      "id": "color_style"
    }
  ],
  "blocks": [
    {
      "name": {
        "zh_CN": "优惠券"
      },
      "type": "coupons-items",
      "settings": [
        {
          "type": "card_coupon",
          "label": {
            "zh_CN": "优惠券"
          },
          "default": {
            "id": "",
            "title": ""
          },
          "id": "coupon"
        }
      ]
    }
  ],
  "default": {
    "settings": {
      "title": "Coupons",
      "detail": "Copy a coupon code below and apply it when checkout",
      "color_style": "rgba(29,31,33,1)"
    },
    "blocks": [
      {
        "coupon": {
          "id": "",
          "title": ""
        },
        "block_type": "coupons-items"
      }
    ]
  }
}
{% endschema %}